<template>
  <div class="app-container">
    <div class="filter-container" id="filter-container-Form-mystart-task">
      <el-radio-group v-model="status" @change="handleFilter()">
        <el-radio-button :label="1">执行中</el-radio-button>
        <el-radio-button :label="2">已结束</el-radio-button>
      </el-radio-group>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="taskList"
      border
      highlight-current-row
      :height="tableHeight"
      style="width: 100%; margin-top: 10px;"
    >

      <el-table-column align="center" type="index" width="60" label="序号">
        <template slot-scope="scope">
          <span> {{(listQuery.page - 1) * listQuery.limit + scope.$index + 1}}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="流程实例ID"
        prop="procInstId"
        align="center"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.procInstId }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="流程实例名称"
        prop="procInstName"
        align="center"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.procInstName }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="发起人ID"
        prop="procInstStartUserId"
        align="center"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.procInstStartUserId }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="流程发起时间"
        prop="procInstStartTime"
        align="center"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.procInstStartTime }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="流程状态"
        prop="processStatus"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.processStatus }}</span>
        </template>
      </el-table-column>


      <!--操作Button + 页面级权限控制:hasPermission -->
      <el-table-column label="操作" align="center" min-width="130">
        <template slot-scope="{row,$index}">
          <el-button type="primary" size="mini" @click="handleProcImage(row)">流程图</el-button>
          <el-button type="primary" size="mini" @click="handleShowDetails(row)">详细</el-button>
        </template>
      </el-table-column>

    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <el-dialog title="流程图" :visible.sync="dialog4ProcImage" width="60%">
      <TmptFlowImage ref="tmptFlowImage" :procInstId="procInstId" />
    </el-dialog>

    <el-dialog title="详细" :visible.sync="dialog4Verify">
      <TmptDynamicFormMyStart ref="tmptDynamicFormApprove" :procInstId="procInstId"/>
    </el-dialog>

  </div>
</template>

<script>
import {listMyStartProcInst} from './api/dynamicApi'
import TmptFlowImage from './tmpt-flow-image'
import TmptDynamicFormMyStart from "@/views/flow/act/task/tmpt-dynamic-form-mystart";
import Pagination from "@/components/Pagination/index";
import {resizeTableHeight} from "@/utils";

export default {
    name: 'TmptMyStartTask',
    components: {Pagination, TmptFlowImage, TmptDynamicFormMyStart},
    data() {
        return {
            tableKey:'',
            taskList:[],
            listLoading:false,
            dialog4ProcImage: false,
            dialog4Verify: false,
            procInstId: undefined,
            taskId: undefined,
            status: 1,
            listQuery: {
              page: 1,
              limit: 20,
              sort: '-id'
            },
            total: 10,
            tableHeight:0, // 表格高度
        }
    },
    computed: {
    },
    mounted() {
        // 浏览器、元素大小变化时，动态调整table高度
        resizeTableHeight(this, 'filter-container-Form-mystart-task',210)
        this.getList();
    },
    methods: {
        // status: 1执行中，2已结束
        getList() {
            this.listLoading = true
            // 重组查询条件
            const params = Object.assign({"status":this.status}, this.listQuery)
            listMyStartProcInst(params).then(r => {
                this.listLoading = false
                if (!r.success) {
                    this.notify(r)
                    return
                }
                this.taskList = r.list
                this.total = r.total
            })
        },
        // 从第一页开始查询
        handleFilter() {
            this.listQuery.page = 1
            this.getList()
        },
        handleProcImage(row) {
            this.dialog4ProcImage = true
            this.procInstId = row.procInstId
        },
        handleShowDetails(row) {
          this.dialog4Verify = true
          this.procInstId = row.procInstId
        }
    }
}
</script>
